<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-09-27 16:02:37
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-10-18 13:34:07
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\statistics\safetyStatistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="environment-wrap listInner">
    <div class="firms-box">
      <!-- 禅道 6911 -->
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="集团分级评价等级" />
      <div class="firms-content content-box">
        <div class="total">{{ firmsData.name }}
          <h3>{{ firmsData.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in firmsData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}</b>
          </li>
        </ul>
      </div>
      <!--      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="企业数量" />-->
      <!--      <div class="firms-content content-box">-->
      <!--        <div class="total">{{ secondData.name }}-->
      <!--          <h3>{{ secondData.value }}</h3>-->
      <!--        </div>-->
      <!--        <ul>-->
      <!--          <li v-for="(it, ind) in secondData.classifyData" :key="ind">-->
      <!--            <span class="name">{{ it.name }}</span>-->
      <!--            <b>{{ it.value }}</b>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>

    <customTitle :is-line="true" bg-color="#3795ff" title="排污许可证管理级别" />
    <div class="pieChartpwxk">
      <div ref="pieChartpwxk" :style="{ height: '200px' }">饼图</div>
    </div>

    <customTitle :is-line="true" bg-color="#3795ff" title="环境风险点" />
    <div class="pieChartEnvironment">
      <div ref="pieChart" class="" style="height: 200px;" />
    </div>

    <customTitle :is-line="true" bg-color="#3795ff" title="环境污染源" />
    <div class="pieCharthjwr">
      <div ref="pieCharthjwr" class="" style="height: 200px;" />
    </div>

    <customTitle :is-line="true" bg-color="#3795ff" title="本年度在聘专家数量" />
    <div class="pieCharthbzj">
      <div ref="pieCharthbzj" style="height: 200px;">饼图</div>
    </div>

    <div class="danger-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#fcac00" icon-color="#fcac00" title="隐患排查治理">
        <template #right>
          <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="YhcurrenYear" @change="()=>{dangersLevelNum();HbDangersLedgerRate();getFirstCompanyRatio();getCompanyNum()}" />
        </template>
      </customTitle>
      <div class="danger-content content-box">
        <div class="total">{{ dangerData.name }}
          <h3>{{ dangerData.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in dangerData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}</b>
          </li>
        </ul>
      </div>
      <div class="danger-content danger-content1 content-box">
        <div class="total">{{ dangerRectifyData.name }}
          <h3>{{ dangerRectifyData.value }}</h3>
        </div>
        <ul>
          <li v-for="(it, ind) in dangerRectifyData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}</b>
          </li>
          <li> <p style="width: 100%;display: flex;justify-content: space-between"><span>重大隐患已整改：</span>{{ dangerRectifyData.yzgZdTotal }}</p> </li>
          <li> <p style="width: 100%;display: flex;justify-content: space-between"><span>重大隐患未整改：</span>{{ dangerRectifyData.wzgZdTotal }}</p> </li>
        </ul>
      </div>

      <div class="danger-content content-box">
        <div class="total">
          {{ companyRatioData.name }}
          <h3>{{ companyRatioData.value }}</h3>
        </div>
        <ul>
          <li style="width: 100%;"> <p style="width: 100%;display: flex;justify-content: space-between"><span>企业数量：</span>{{ companyRatioData.companyTotal }}</p> </li>
          <li style="width: 100%;"> <p style="width: 100%;display: flex;justify-content: space-between"><span>提交数量：</span>{{ companyRatioData.manageSystemTotal }}</p> </li>
        </ul>
      </div>

      <div class="danger-content content-box danger-content1">
        <div class="total">
          {{ meetEmergency.name }}
          <h3>{{ meetEmergency.bl }}</h3>
        </div>
        <ul>
          <li style="width: 100%;"> <p style="width: 100%;display: flex;justify-content: space-between"><span>企业数量：</span>{{ meetEmergency.company }}</p> </li>
          <li style="width: 100%;"> <p style="width: 100%;display: flex;justify-content: space-between"><span>提交企业数量：</span>{{ meetEmergency.submit }}</p> </li>
        </ul>
      </div>
      <div class="danger-content content-box">
        <div class="total" style="width: 100%;">
          {{ '通过环境管理体系认证的企业' }}
          <h3>{{ companyRatioData.companyRiskTotal }}</h3>
        </div>
      </div>
    </div>
    <customTitle :is-line="true" bg-color="#3795ff" title="隐患类别分析">
      <template #right>
        <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="currenYear" />
      </template>
    </customTitle>
    <!-- 隐患类别统计 -->
    <div class="barChart">
      <div ref="barChart" style="height: 200px;" />
    </div>

    <!--    #12445 -->
    <!--    <ul class="stasticBox">-->
    <!--      <li v-for="(it, ind) in stasticData" :key="ind">-->
    <!--        <div class="iconBox">-->
    <!--          <i class="iconfont" v-html="it.icon" />-->
    <!--        </div>-->
    <!--        <div class="numBox">-->
    <!--          <h3 class="name">{{ it.name }}</h3>-->
    <!--          <b>{{ it.value }}</b>-->
    <!--        </div>-->
    <!--      </li>-->
    <!--    </ul>-->
  </div>
</template>

<script>
import customTitle from '@/components/globals/custom-title.vue'
import customTimer from '@/components/common/custom-timer.vue'
import { doublePieChart, lineHorizontalChart } from '@/utils/chart'
import { parseTime } from '@/utils'
import {
  getAdvanceExpertStatistics, getCompanyNum, getCompanyPollutionListNum,
  getCompanyRiskListNum,
  getExpertStatisticsList, getFirstCompanyRatio,
  getFirstCompanyStatistics,
  HbDangerCategoryAnalysis,
  HbDangersLedgerRate,
  HbDangersLevelNum,
  HbPermitManagerLevelTotal
} from '@/api/commonPage/statistics'
import { hbCompanyList, HbPermitCount } from '@/api/enterprise'
import { currentTime } from '@/utils/dayJs'

export default {
  components: {
    customTitle,
    customTimer
  },
  inject: ['layout'],
  data() {
    return {
      firmsData: {
        name: '集团分级评价等级总数',
        value: 169,
        classifyData: [
          { name: '1A（废水）', value: 15 },
          { name: '2A（废气）', value: 42 },
          { name: '3A（土壤）', value: 43 },
          { name: '4A（噪声）', value: 69 },
          { name: '5A（辐射及其他）', value: 69 },
          { name: 'B级（关注类）', value: 69 },
          { name: 'C级（一般类）', value: 69 }
        ]
      },
      secondData: {
        name: '企业总数',
        value: 0,
        classifyData: [
          { name: 'A级企业', value: 0 },
          { name: 'B级企业', value: 0 },
          { name: 'C级企业', value: 0 },
          { name: '未评级', value: 0 }
        ]
      },
      dangerData: {
        name: '年度隐患数量',
        value: 69,
        classifyData: [
          { name: '重大隐患', value: 15 },
          { name: '一般隐患', value: 42 }
        ]
      },
      dangerRectifyData: {
        name: '年度隐患整改率',
        value: '65.3%',
        yzgZdTotal: '0',
        wzgZdTotal: 0,
        classifyData: [
          { name: '已整改', value: 15 },
          { name: '未整改', value: 42 }
        ]
      },
      YhcurrenYear: parseTime(new Date(), '{y}'), // 隐患排查治理
      currenYear: parseTime(new Date(), '{y}'),
      stasticData: [
        { name: '在聘专家数量', value: 82, icon: '&#xe607;' },
        // { name: '本年度事故事件', value: 3, icon: '&#xe6b7;' },
        { name: '排污许可证数量', value: 3, icon: '&#xe61c;' }
      ],
      pieData: [],
      barData: [],
      HbPermitManagerLevelTotalData: [],
      getCompanyPollutionListNumData: [],
      getAdvanceExpertStatisticsData: [],
      companyRatioData: {
        name: '风险评估率',
        value: 0,
        companyTotal: '0',
        manageSystemTotal: 0,
        companyRiskTotal: 0
      },
      meetEmergency: {
        name: '应急预案提交率',
        bl: '',
        company: '',
        submit: ''
      },
      apiNum: 0,
      loadApi: 1
    }
  },
  watch: {
    currenYear() {
      this.HbDangerCategoryAnalysis()
      this.HbPermitCountHandler()
      this.getAdvanceExpertStatistics()
      // this.getExpertStatisticsList()
    }
  },
  mounted() {
    this.layout.showAreaLoading(['.firms-content.content-box', '.danger-box', '.pieChartEnvironment', '.pieChartpwxk', '.pieCharthjwr', '.pieCharthbzj', '.barChart'])
    this.getData()
  },
  methods: {
    getData() {
      this.hbCompanyList()
      this.getFirstCompanyStatistics()
      this.getCompanyRiskListNum()
      this.dangersLevelNum()
      this.HbDangersLedgerRate()
      this.HbDangerCategoryAnalysis()
      this.getAdvanceExpertStatistics()
      this.HbPermitManagerLevelTotal()
      this.HbPermitCountHandler()
      this.getCompanyPollutionListNum()
      this.getFirstCompanyRatio()
      this.getCompanyNum()
      // this.getExpertStatisticsList()
    },
    async HbPermitCountHandler() {
      const resInfo = {
        pageNum: 1,
        pageSize: 10,
        timeSelVal: '自定义',
        startTime: '',
        endTime: '',
        companyIds: -1,
        manageLevel: '',
        industryType: '',
        isdq: ''
      }
      const date = new Date()
      const month = date.getMonth() + 1
      const year = date.getFullYear()
      const day = date.getDate()
      if (year !== Number(this.currenYear)) {
        resInfo.startTime = `${this.currenYear}-01-01`
        resInfo.endTime = `${this.currenYear}-12-31`
      } else {
        resInfo.startTime = `${this.currenYear}-01-01`
        resInfo.endTime = `${this.currenYear}-${month > 9 ? month : '0' + month}-${day > 9 ? day : '0' + day}`
      }
      const { status, data } = await HbPermitCount(resInfo)
      if (status === 0 && data) {
        this.stasticData[1].value = data.yxqCount
      }
    },
    async getExpertStatisticsList() {
      const { data, status } = await getExpertStatisticsList({
        pageNum: 1,
        pageSize: 10,
        companyId: -1,
        year: this.currenYear
      })
      if (status === 0) {
        this.stasticData[0].value = data.expertTotal
      }
    },
    hideLoading() {
      this.loadApi++
      if (this.loadApi >= this.apiNum) {
        this.layout.hideAreaLoading(['.firms-content.content-box', '.danger-box', '.pieChartEnvironment', '.pieChartpwxk', '.pieCharthjwr', '.pieCharthbzj', '.barChart'])
      }
    },
    async hbCompanyList() {
      const { status, data } = await hbCompanyList()
      if (status === 0 && data) {
        // this.firmsData.value = data.total
      }
    },
    async getFirstCompanyStatistics() {
      this.apiNum++
      const { data, status } = await getFirstCompanyStatistics()
      let total = 0
      data.envLevelList.forEach(y => {
        total += y?.evaluateTotal
      })
      this.firmsData.value = total
      this.secondData.value = total + '家'
      if (data && status === 0) {
        this.firmsData.classifyData = data.envLevelList.map(val => ({
          name: val.selfLevel,
          value: val?.evaluateTotal
        }))
        // 企业数量
        const summaryData = [
          { name: 'A级企业', value: data.envLevelList.reduce((acc, cur) => cur.selfLevel.includes('A') ? acc + cur?.evaluateTotal : acc, 0) + '家' },
          { name: 'B级企业', value: data.envLevelList.find(item => item.selfLevel === 'B级')?.evaluateTotal + '家' },
          { name: 'C级企业', value: data.envLevelList.find(item => item.selfLevel === 'C级')?.evaluateTotal + '家' },
          { name: '未评级', value: data.envLevelList.find(item => item.selfLevel === '未评级')?.evaluateTotal + '家' }
        ]
        this.secondData.classifyData = summaryData
      }
      this.hideLoading()
    },
    async getCompanyRiskListNum() {
      this.apiNum++
      const { data, status } = await getCompanyRiskListNum()
      if (data && status === 0) {
        this.pieData = data.map(val => ({
          name: val.key,
          num: val.val
        }))
        this.initPieChart()
      }
      this.hideLoading()
    },
    async dangersLevelNum() {
      this.apiNum++
      const { data, status } = await HbDangersLevelNum({ year: this.YhcurrenYear })
      if (data && status === 0) {
        this.dangerData.value = data[0].total
        this.dangerData.classifyData[0].value = data[0].zdTotal
        this.dangerData.classifyData[1].value = data[0].ybTotal
      }
      this.hideLoading()
    },
    async HbDangersLedgerRate() {
      this.apiNum++
      const { data, status } = await HbDangersLedgerRate({ year: this.YhcurrenYear })
      if (data && status === 0) {
        this.dangerRectifyData.value = data[0].zgl + '%'
        this.dangerRectifyData.yzgZdTotal = data[0].yzgZdTotal
        this.dangerRectifyData.wzgZdTotal = data[0].wzgZdTotal
        this.dangerRectifyData.classifyData[0].value = data[0].yzgTotal
        this.dangerRectifyData.classifyData[1].value = data[0].wzgTotal
      }
      this.hideLoading()
    },
    async HbDangerCategoryAnalysis() {
      this.apiNum++
      const { data, status } = await HbDangerCategoryAnalysis({ year: this.currenYear })
      if (data && status === 0) {
        this.barData = data
        this.initBarChart()
      }
      this.hideLoading()
    },
    async getAdvanceExpertStatistics() {
      this.apiNum++
      const { data, status } = await getAdvanceExpertStatistics({ years: currentTime('年') })
      if (data && status === 0) {
        this.getAdvanceExpertStatisticsData = data
        this.initPieCharthbzj()
      }
      this.hideLoading()
    },
    async HbPermitManagerLevelTotal() {
      this.apiNum++
      const { data, status } = await HbPermitManagerLevelTotal({ year: currentTime('年') })
      if (data && status === 0) {
        this.HbPermitManagerLevelTotalData = data.map((val) => ({
          name: val.typeName,
          value: val.amount
        }))
        this.initPieChartpwxk()
      }
      this.hideLoading()
    },
    async getCompanyPollutionListNum() {
      this.apiNum++
      const { status, data } = await getCompanyPollutionListNum({ year: currentTime('年') })
      if (data && status === 0) {
        this.getCompanyPollutionListNumData = data
      }
      this.initPieCharthjwr()
      this.hideLoading()
    },
    // 风险评估统计与通过体系环境企业统计
    async getFirstCompanyRatio() {
      this.apiNum++
      const { status, data } = await getFirstCompanyRatio({ year: this.YhcurrenYear })
      if (data && status === 0) {
        this.companyRatioData.value = data.manageSystemRatio
        this.companyRatioData.companyTotal = data.companyTotal
        this.companyRatioData.manageSystemTotal = data.manageSystemTotal
        this.companyRatioData.companyRiskTotal = data.companyRiskTotal
      }
      this.hideLoading()
    },
    async getCompanyNum() {
      this.apiNum++
      const { data, status } = await getCompanyNum({ year: this.YhcurrenYear })
      if (data && status === 0) {
        this.meetEmergency = {
          company: data.find((val) => val.key === '企业数量').val,
          submit: data.find((val) => val.key === '提交数量').val,
          bl: data.find((val) => val.key === '应急预案').val,
          name: this.meetEmergency.name
        }
      }

      this.hideLoading()
    },
    initBarChart() {
      const dataY = this.barData.map(val => val.typeName).reverse()
      console.log('this.barData', dataY)
      const dataSeries = [{
        name: '已整改',
        type: 'bar',
        stack: 1,
        data: this.barData.map(val => val.yzgNum).reverse(),
        itemStyleColor: '#6a99f9'
      }, {
        name: '未整改',
        type: 'bar',
        stack: 1,
        data: this.barData.map(val => val.wzgNum).reverse(),
        itemStyleColor: '#ccdfff'
      }
      ]
      console.log('dataSeries', dataSeries)
      const params = {
        legendShow: true,
        tooltipShow: true,
        gridRight: '5%',
        gridTop: '12%',
        gridLeft: '0%',
        gridBottom: '12%',
        legendBottom: 2
      }
      const chart = this.$refs.barChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineHorizontalChart(dataY, dataSeries, params))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initPieChart() {
      const colorList = ['rgba(91,186,245,1)', 'rgba(69,198,179,1)', 'rgba(247,181,40,1)', 'rgba(109,163,253,1)']
      const data = this.pieData.map((val) => ({
        name: val.name,
        value: val.num
      }))
      const totalData = data.reduce((prev, cur) => {
        return prev + cur.value
      }, 0)
      const legendData = []
      const seriesData = []
      for (let index = 0; index < data.length; index++) {
        legendData.push(data[index].name)
        seriesData.push(
          {
            value: data[index].value,
            name: data[index].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: colorList[index]
              }
            }
          },
          {
            value: 0,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const params = {
        title: totalData,
        legendData: legendData,
        legendItemHeight: 13,
        legendRight: 2,
        legendItemGap: 10
      }
      const chart = this.$refs.pieChart
      if (chart) {
        if (totalData > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(doublePieChart(data, seriesData, params))
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
        }
      }
    },
    // 排污许可证管理级别chart图
    initPieChartpwxk() {
      const colorList = ['rgba(91,186,245,1)', 'rgba(69,198,179,1)', 'rgba(109,163,253,1)']
      const data = [
        // this.HbPermitManagerLevelTotalData
        { name: '重点管理', value: this.HbPermitManagerLevelTotalData.find((val) => val.name === '重点管理')?.value },
        { name: '简化管理', value: this.HbPermitManagerLevelTotalData.find((val) => val.name === '简化管理')?.value },
        { name: '登记管理', value: this.HbPermitManagerLevelTotalData.find((val) => val.name === '登记管理')?.value }
      ]
      const totalData = this.HbPermitManagerLevelTotalData.find((val) => val.name === '总数')?.value
      console.log(totalData, this.HbPermitManagerLevelTotalData)
      const legendData = []
      const seriesData = []
      for (let index = 0; index < data.length; index++) {
        legendData.push(data[index].name)
        seriesData.push(
          {
            value: data[index].value,
            name: data[index].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: colorList[index]
              }
            }
          },
          {
            value: 0,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const params = {
        title: totalData,
        legendData: legendData
      }
      const chart = this.$refs.pieChartpwxk
      if (chart) {
        if (totalData > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(doublePieChart(data, seriesData, params))
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          chart.removeAttribute('_echarts_instance_')
          chart.innerHTML = '<div style="line-height: 128px;text-align: center;font-size: 14px;color: #909399;">暂无数据</div>'
        }
      }
    },
    // 环境污染源chart图
    initPieCharthjwr() {
      const colorList = ['rgba(91,186,245,1)', 'rgba(69,198,179,1)', 'rgba(247,181,40,1)']
      const data = this.getCompanyPollutionListNumData.map((val) => ({
        name: val.key,
        value: val.val
      }))
      const totalData = data.reduce((prev, cur) => {
        return prev + cur.value
      }, 0)
      const legendData = []
      const seriesData = []
      for (let index = 0; index < data.length; index++) {
        legendData.push(data[index].name)
        seriesData.push(
          {
            value: data[index].value,
            name: data[index].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: colorList[index]
              }
            }
          },
          {
            value: 0,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const params = {
        title: totalData,
        legendData: legendData
      }
      const chart = this.$refs.pieCharthjwr
      if (chart) {
        if (totalData > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(doublePieChart(data, seriesData, params))
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          chart.removeAttribute('_echarts_instance_')
          chart.innerHTML = '<div style="line-height: 128px;text-align: center;font-size: 14px;color: #909399;">暂无数据</div>'
        }
      }
    },
    // 环保专家chart图
    initPieCharthbzj() {
      const colorList = ['rgba(254,109,90,1)', 'rgba(246,147,67,1)', 'rgba(251,186,47,1)']
      const data = this.getAdvanceExpertStatisticsData.map((val) => ({
        name: val.devicename,
        value: val.specialdevicetotal
      }))
      const totalData = data.reduce((prev, cur) => {
        return prev + cur.value
      }, 0)
      console.log(totalData)
      const legendData = []
      const seriesData = []
      for (let index = 0; index < data.length; index++) {
        legendData.push(data[index].name)
        seriesData.push(
          {
            value: data[index].value,
            name: data[index].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: colorList[index]
              }
            }
          },
          {
            value: 0,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const params = {
        title: totalData,
        legendData: legendData
      }
      const chart = this.$refs.pieCharthbzj
      if (chart) {
        if (totalData > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(doublePieChart(data, seriesData, params))
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          chart.removeAttribute('_echarts_instance_')
          chart.innerHTML = '<div style="line-height: 128px;text-align: center;font-size: 14px;color: #909399;">暂无数据</div>'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .environment-wrap {
    background-color: #fff;
    .content-box {
      padding: 10px;
      background-color: #e5feff;
      border-radius: 10px;
      border: solid 2px #07cdd4;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .total {
        width: 25%;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 24px;
        line-height: 0.533rem;
        h3 {
          color: #07cdd4;
        }
      }
      ul {
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: calc(50% - 10px);
          display: flex;
          justify-content: space-between;
          height: 50px;
          background-color: rgba(139, 220, 223, 0.5);
          border-left: solid 2px #07cdd4;
          border-right: solid 2px #07cdd4;
          margin: 5px 5px;
          align-items: center;
          padding: 0 10px;
          font-size: 0.373rem;
          color: #051b32;
          position: relative;
          &:nth-child(5) {
            width: 100%;
          }
          &:nth-child(6) {
            width: 100%;
          }
          &:nth-child(7) {
            width: 100%;
          }
          &:nth-child(8) {
            width: 100%;
          }
          &::before {
            content: '';
            width: 100%;
            height: 1px;
            border-left: 6px solid #07cdd4;
            border-right: 6px solid #07cdd4;
            position: absolute;
            top: 0;
            left: 0;
          }
          &::after {
            content: '';
            width: 100%;
            height: 1px;
            border-left: 6px solid #07cdd4;
            border-right: 6px solid #07cdd4;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      &.danger-content {
        background-color: #cedeff;
        border: solid 2px #6a99f9;
        .total {
          width: 42%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          position: relative;
          padding-left: 0.267rem;
          align-items: center;
          &::before {
            content: '';
            left: 0;
            height: 0.373rem;
            width: 0.106rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #6a99f9;
          }
          h3 {
            color: #6a99f9;
            margin-left: 0.133rem;
          }
        }
        ul {
          width: 58%;
          li {
            width: calc(50% - 10px);
            background-color: rgba(159, 189, 248, 0.5);
            border-left: solid 2px #6a99f9;
            border-right: solid 2px #6a99f9;
            div {
              display: flex;
              width: 30%;
            }
            &::before {
              border-left: 6px solid #6a99f9;
              border-right: 6px solid #6a99f9;
            }
            &::after {
              border-left: 6px solid #6a99f9;
              border-right: 6px solid #6a99f9;
            }
          }
        }
        &.danger-content1 {
          background-color: #c3eadd;
          border: solid 2px #42d7a7;
          .total {
            width: 42%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            position: relative;
            padding-left: 0.267rem;
            align-items: center;
            &::before {
              content: '';
              left: 0;
              height: 0.373rem;
              width: 0.106rem;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              background-color: #42d7a7;
            }
            h3 {
              color: #42d7a7;
              margin-left: 0.133rem;
            }
          }
          ul {
            width: 58%;
            li {
              width: calc(50% - 10px);
              background-color: rgba(136, 230, 200, 0.5);
              border-left: solid 2px #42d7a7;
              border-right: solid 2px #42d7a7;
              div {
                display: flex;
                width: 30%;
              }
              &::before {
                border-left: 6px solid #42d7a7;
                border-right: 6px solid #42d7a7;
              }
              &::after {
                border-left: 6px solid #42d7a7;
                border-right: 6px solid #42d7a7;
              }
              &:nth-child(3),&:nth-child(4) {
                width: 100%;
              }
            }
          }
        }
      }
    }
    .customTimer {
      margin: 0;
      width: 2.133rem;
      border: 1px solid #3795ff;
      border-radius: 0.106rem;
      ::v-deep .timer-box .down {
        color: #3795ff;
      }
    }
    .stasticBox {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      width: 100%;
      //margin-left: -2.5%;
      li {
        //margin-right: 10px;
        background-image: linear-gradient(-40deg, #4676f3 0%,  #62beff 100%),
        linear-gradient(#eff4fc, #eff4fc);
        background-blend-mode: normal, normal;
        border-radius: 5px;
        padding: 20px 10px;
        align-items: center;
        width: 49%;
        //&:first-child {
        //  width: 31%;
        //}
        &:nth-child(2) {
          background-image: linear-gradient(-40deg, #606eef 0%,#91a0ff 100%),
          linear-gradient( #eff4fc, #eff4fc);
          background-blend-mode: normal, normal;
          .iconBox {
            .iconfont {
              color: #606eef;
            }
          }
        }
        &:nth-child(3) {
          background-image: linear-gradient(-40deg, #f4b111 0%, #f7d650 100%),
          linear-gradient(#eff4fc, #eff4fc);
          background-blend-mode: normal, normal;
          .iconBox {
            .iconfont {
              color: #f4b111;
            }
          }
        }
        .iconBox {
          background-color: rgba(255, 255, 255, 0.6);
          padding: 6px;
          border-radius: 50%;
          width: 72px;
          height: 72px;
          margin: 0 auto;
          .iconfont {
            width: 60px;
            height: 60px;
            display: inline-block;
            text-align: center;
            line-height: 60px;
            background-color: #ffffff;
            color: #62beff;
            font-size: 0.533rem;
            border-radius: 50%;
          }
        }
        .numBox {
          color: #fff;
          margin-top: 20px;
          text-align: center;
          h3 {
            font-size: 0.373rem;
            line-height: 0.427rem;
          }
          b {
            font-size: 0.373rem;
            font-weight: bold;
            line-height: 0.533rem;
          }
        }
      }
    }
  }
</style>
